<template class="tabBox">
  <div class="tabItem">
    <!-- Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。 -->
    <el-tabs v-model="activeValue" @tab-click="handleClick" stretch="True">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name:'tabs',
  // 数据区域
  data() {
    return {
      activeValue: 'first'
    }
  },
  // 组件初始化前的准备操作，在此处执行
  created() {
    // 事件监听，this.$bus.$on事件一般在此处定义

    // 初始数据载入

  },
  // 组件初始化后需要进行的操作，在此处执行
  mounted() {
    // 组件渲染，传递参数，this.$bus.$emit

  },
  // JS方法
  methods: {
    handleClick(tab) {
      //console.log(tab, event);
      //console.log(tab.name);
      this.$emit('changeState',tab.name)
    }
  }
}
</script>

<style scoped>
.tabBox{
  width: 100%;
  text-align: center;
}
.tabItem{
  width: 100%;
  text-align: center;
}
</style>
